<template>
    <div class="chart-container">
        <div id="mainSs" ref="echart" style="width: 100%;height: 100%;"></div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';

// 获取 DOM 元素
const echart: any = ref(null);
const myChart: any = ref(null);
let datas = [
    { name: '教工', value: 1048, itemStyle: { color: '#5087EC' } },
    { name: '学生', value: 735, itemStyle: { color: '#FFC641' } },
    { name: '校外', value: 580, itemStyle: { color: '#F8752A' } }
];
let sum = 666
// 配置项
const getOption = (datab: any) => {
    if (!Array.isArray(datab)) {
        return {}; // 返回一个空配置，避免报错
    }
    return {
        title: {
            text: sum,
            top: "33%",
            left: "16%",
            subtext: "总数",
            itemGap: 8,
            textAlign: 'center',
            textStyle: {
                color: "#4B9AEA",
                fontSize: 25,
                fontWeight: 900
            },
            subtextStyle: {
                color: "#333",
                fontSize: 14
            },
        },
        grid: {
            left: '0%', // 图表（饼图）距离容器左侧边界占容器宽度的5%，可根据需要调整此值来控制饼图的左移程度
            width: '40%', // 图表（饼图）宽度占容器宽度的40%，可适当增大或减小此值来改变饼图宽度占比
            containLabel: true // 确保标签等元素能在这个区域内合理显示
        },
        tooltip: {
            formatter: "{b} : {c} ({d}%)",
        },
        legend: {
            top: "center",
            orient: "vertical", // 设置图例为垂直布局
            right: "28%",
            formatter: function (name:any) {
                let item = datab.filter(item => item.name === name)[0];
                return name + '： ' + item.value + '个';
            },
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['56%', '88%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                left: "-65%",
                labelLine: {
                    show: false
                },
                data: datab
            }
        ]
    };
};

const getOptionS = () => {
    if (echart.value) {
        myChart.value = echarts.init(echart.value);
        myChart.value.setOption(getOption(datas));
    }
}

// 监听窗口大小变化，重新渲染图表
const resizeHandler = new ResizeObserver(() => {
    if (echart.value) {
        myChart.value.resize();
    }
})

onMounted(() => {
    if (echart.value) {
        getOptionS()
    }
    resizeHandler.observe(echart.value);
});

onBeforeUnmount(() => {
    resizeHandler.unobserve(echart.value);
});

// 监听 props 变化，动态更新图表
</script>

<style lang="scss" scoped>
.chart-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 80%;
}
</style>